<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe 高度自适应 demo</title>
    <style>
        body {
            text-align: center;
        }
        .text {
            font-weight: bold;
        }
        h1 {
            text-align: center;
            font-weight: normal;
        }
        pre {
            font: 14px/1.3 Consolas, Monaco, monospace;
            padding: 5px 10px;
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #ccc;
        }

        .code {
            width: 50%;
            display: inline-block;
            vertical-align: top;
        }

        .container,
        iframe {
            width: 40%;
            height: 500px;
            display: inline-block;
            border: 1px solid #ccc;
        }

        .container {
            box-sizing: border-box;
            text-align: left;
            vertical-align: top;
            padding: 30px;
        }

        button {
            height: 36px;
            padding: 7px 20px;
            border-radius: 3px;
            color: #fff;
            background-color: #02bd85;
            border: 1px solid #02a473;
            cursor: pointer;
        }

        button:hover {
            background-color: #018b61;
        }
    </style>
</head>

<body>
    <h1>iframe 和父页面之间相互调用全局方法</h1>
    <div class="container">
        <p style="text-align: left;">调用 <strong>iframe</strong> 的一个全局方法：</p>
        <p>
            <button id="runByName">run（利用 iframe 的 name 属性）</button>
            <br>
            <button id="runByJs">run（利用原生 iframe DOM 的 contentWindow 属性）</button>
            <br>
            <button id="runByJQ">run（利用Jquery）</button>
        </p>
    </div>


    <iframe id="iframeId" name="childIframe" src="./invoke-function-child.html"></iframe>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function parentFn  () {
            var text = '我来自 父页面，由 iframe 调用';
            alert(text)
            console.log(text);
        }
        window.onload = function () {

            // window.parentFn = function () {
            //     var text = '我来自 父页面，由 iframe 调用';
            //     console.log(text);
            // }

            $('#runByName').on('click', function () {
                // iframe 标签的 name 属性，可以直接获取 iframe 的 window 对象
                childIframe.window.iframeFn('利用 iframe 的 name 属性');
            })

            $('#runByJQ').on('click', function () {
                // jquery 的方法不好使
                // $("#iframeId")[0].contentWindow.iframeFn('利用Jquery');
                $("#iframeId")[0].contentWindow.iframeFn({ hello: 'world' });
            })

            $('#runByJs').on('click', function () {
                // 原生 iframe DOM 的 contentWindow 属性获取 iframe 的 window 对象
                document.getElementById("iframeId").contentWindow.iframeFn('利用原生 iframe DOM 的 contentWindow 属性')
            })
        }
    </script>
</body>

</html>